import React, {
	Component
} from 'react';
import {
	observer,
	inject,
} from 'mobx-react';
import Form from "./Form.js" ;
import Member from "./Member.js";
import Share from "./Share.js";
import { TabPage, BrowserHrm } from 'weaver-mobile-page';
import { Button, Tools } from 'weaver-mobile';
import {
	withRouter,
} from 'react-router-dom';
import { configNavigation } from "../../util/public-func";
import "../../style/group.less";
const getLabel = Tools.getLabel;

@inject('groupStore')
@inject('addressBookStore')
@withRouter
@observer
export default class OperateGroup extends Component {
	componentWillMount() {
		const {
			location,
			groupStore
		} = this.props, {
			handlePopoverSelect,
			openGroupSettingLayout,
			setTabKey,
			setSource,
			splitUrl,
		} = groupStore, {
			pathname,
			search
		} = location;

		//单页
		if ( pathname.includes("groupOp") ) {
			//编辑常用组
			if (search) {
				const {
					id,//常用组id
					type//是否是私人组
				} = splitUrl(search);

				const datas = {
					type,
					id,
				}
				openGroupSettingLayout(datas, "1")
				setTabKey("1");
			}else{
				//新建常用组
				handlePopoverSelect({key: "1"})
			}

			setSource("op");
		}
	}

	componentDidMount() {
		const {
			groupStore,
			addressBookStore,
			history
		} = this.props, {
			isEdit,
			source,
			setHistory,
		} = groupStore;

		//单页打开
		if (source === "op") {
			setHistory(history);
			groupStore.addressBookStore = addressBookStore;
			// configNavigation(getLabel(386496, "新建常用组"))

			window.em && window.em.configNavigation({
                left:{
                    name:getLabel(1290, "返回"),
                    action:() => {
                        window.em.closeAndReload();
                        configNavigation(getLabel('518809', '常用组管理'));
                    }
                },
                showCloseButton:false,
            })
		}
			
		configNavigation(!isEdit ? getLabel(386496, "新建常用组")  : getLabel(518812, "编辑常用组"))
		

	}

	componentWillUnmount() {
		const {
			groupStore,
		} = this.props, {
			refreshMainPage,
			source,
		} = groupStore;

		refreshMainPage();

		if (source!="op") {
			configNavigation(getLabel('518809', '常用组管理'));
		}
	}

	render() {
		const {
			groupStore
		} = this.props, {
			tabs,
			tabKey,
			setTabKey,
			basicForm,
			saveBasicInfo,
			hasSaveBtn,
			browserHrmStore,
			setBrowserHrmValue,
			source
		} = groupStore;

		const tabProps = {
			onTabClick: (tab) => {
				const {key} = tab;
				setTabKey(key);
			},
			page:tabKey
		};

		return (
			<div className="operate-group">
				<TabPage
			        className="tab-page-example"
			        tabs={tabs}
			        tabProps={tabProps}
			      />
			      <div className="operate-group-content">
				      {
				      	(tabKey === "1") ? <Form form={basicForm}/> : (tabKey === "2") ? <Member store={groupStore}/> : <Share store={groupStore}/>
				      }
			      </div>
			      <div>
			     		<Button type="primary" onClick={saveBasicInfo}>{getLabel(86, "保存")}</Button>
			      </div>
			      { source === "op" && (
				       <div className="browser-hrm-wrapper"> 
							<BrowserHrm
					          label={getLabel(516509, "多人力资源")} 
					          store={browserHrmStore}
					          hasAdvanceSerach
					          isSingle={false}
					          type={1}
					          onChange={setBrowserHrmValue}
				          	/>
						</div>
			      ) }
			</div>
		);
	}
}